<template>
    <div class="mymapM">
        <!--捜索-->
        <div v-if="loading" class="loading">
            <van-loading type="spinner"/>
        </div>

        <div class="index-header-box" id="head">
            <div class="index-header">
                <div @click="$router.back(-1)" class="back">
                    <van-icon name="arrow-left"/>
                </div>
                <div class="title">看车地点</div>
            </div>
        </div>


        <div class="con-box con-map">
            <!--地图-->
            <div class="mapbox">
                <div class="map" id="container"></div>
                <div class="sign"></div>
            </div>
        </div>

        <van-popup v-model="showPicker" position="bottom">
            <van-picker
                    show-toolbar
                    :columns="columns"
                    @confirm="onConfirm"
                    @cancel="showPicker = false"
            />
        </van-popup>

        <div class="btn-box">
            <van-button type="info" @click="showPicker=true" class="btn-primary">立即导航</van-button>
        </div>
    </div>
</template>

<script>

    export default {
        name: "detail",
        components: {},
        data() {
            return {
                center: [106.576257, 29.556469], //经度+纬度
                marker: "",
                lat: 29.556469,
                lng: 106.576257,
                loading: true,
                showPicker: false,
                columns: ['高德地图', '百度地图', '腾讯地图'],
                id: this.$route.query.id||0,
                address: [],
            }
        },
        computed: {},
        mounted: function () {
            let that=this;

            that.init();
        },
        methods: {
            init() {
                var that=this;
                this.$api.car.detail(this.id).then(res => {
                    var res = res.data;
                    that.info = res.data;
                    that.center = [res.data.lng,res.data.lat];
                    that.address = res.data.address.split('-');

                    that.lat=res.data.lat;
                    that.lng=res.data.lng;

                    that.adMap();
                });
            },
            adMap() {
                this.loading = false;
                //初始化地图
                var map = new AMap.Map("container", {
                    zoom: 14, //缩放级别
                    center: this.center //设置地图中心点
                    //resizeEnable: true,  //地图初始化加载定位到当前城市
                });
                //获取初始中心点并赋值
                var currentCenter = map.getCenter(); //此方法是获取当前地图的中心点
                this.center = [currentCenter.lng, currentCenter.lat]; //将获取到的中心点的纬度经度赋值给data的center
                console.log(this.center);

                //创建标记
                this.marker = new AMap.Marker({
                    position: new AMap.LngLat(currentCenter.lng, currentCenter.lat) // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                });
                // 将创建的点标记添加到已有的地图实例：
                map.add(this.marker);
            },

            onConfirm(value){
                //this.value = value;
                this.choose(value);
                this.showPicker = false;
            },

            choose(names) {  //item是传递过来的高德地图、百度地图、腾讯地图
                var that=this;
                var baiduPackageName = "com.baidu.BaiduMap";//百度地图包名
                var gaodePackageName = "com.autonavi.minimap";//高德地图包名
                var destination = this.center;//获取vuex中的想去目的地的经纬度参数
                 var u = navigator.userAgent;//判断是android系统还是IOS系统
                 var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
                var isIOS = false; //ios终端

                if(!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){
                    isIOS=true;
                }
                if(!isAndroid && !isIOS){
                    this.$toast("浏览器不支持导航，请下载APP后再试");
                    return false;
                }

                var Destination = that.address[0];
                var geoCoordinates = that.address[0];
                if (names == "高德地图") {
                    let scheme;
                    if (isAndroid == true) {
                        scheme = 'com.autonavi.minimap';//获取对应系统的高德地图包名
                    }
                    else {
                        scheme = 'iosamap://';
                    }
                    appAvailability.check(scheme, function () {//使用插件的检测包名的函数，判断手机是否安装该第三方APP!!!!!最重要的地方
                        if (isAndroid == true) {
                            var sApp = startApp.set({
                                "action": "ACTION_VIEW",
                                "category": "CATEGORY_DEFAULT",
                                "type": "text/css",
                                "package": "com.autonavi.minimap",
                                "uri": "amapuri://route/plan/?dlat=" + that.lat + "&dlon=" + that.lng + "&dname=" + Destination + "&dev=0&t=0",//传递经纬度参数
                                "flags": ["FLAG_ACTIVITY_CLEAR_TOP", "FLAG_ACTIVITY_CLEAR_TASK"],
                                "intentstart": "startActivity"
                            });
                            sApp.start(function () { /* success */
                                //alert("OK");
                            }, function (error) { /* fail */
                                this.$toast(error);
                            });
                        } else {//若是IOS,则调起ios版本的
                            window.location.href = "iosamap://navi?sourceApplication=applicationName&poiname=" + Destination + "&poiid=BGVIS&lat=" + that.lat + "&lon=" + that.lng + "&dev=1&style=2";
                        }
                    }, function () {//若没有相应安装相应第三方APP，则弹出链接，提醒下载相应APK
                        if (isAndroid == true) {
                            cordova.InAppBrowser.open("http://amapdownload.autonavi.com/down6/C3060/Amap_V10.35.1.2655_android_C3060_(Build2004222234).apk", '_system', 'hardwareback=no')
                        }
                        else {
                            window.location.href = "itms-apps://itunes.apple.com/cn/app/%E9%AB%98%E5%BE%B7%E5%9C%B0%E5%9B%BE-%E7%B2%BE%E5%87%86%E5%9C%B0%E5%9B%BE-%E5%AF%BC%E8%88%AA%E5%87%BA%E8%A1%8C%E5%BF%85%E5%A4%87/id461703208?mt=8";
                        }
                    });
                }
                else if (names == "百度地图") {
                    let scheme;
                    if (isAndroid == true) {
                        scheme = 'com.baidu.BaiduMap';
                    }
                    else {
                        scheme = 'baidumap://';
                    }
                    appAvailability.check(scheme, function () {//success callback
                        if (isAndroid == true) {
                            var sApp = startApp.set({
                                /* params */
                                "action":"ACTION_VIEW",
                                "category":"CATEGORY_DEFAULT",
                                "type":"text/css",
                                "package":"com.baidu.BaiduMap",
                                "uri": "baidumap://map/direction?destination=name:"+Destination+"|latlng:"+that.lat+","+that.lng+"&mode=driving",
                                "flags":["FLAG_ACTIVITY_CLEAR_TOP","FLAG_ACTIVITY_CLEAR_TASK"],
                                "intentstart":"startActivity"
                            });
                            sApp.start(function () { /* success */
                                //alert("OK");
                            }, function (error) { /* fail */
                                this.$toast(error);
                            });
                        }
                        else {
                            window.location.href = "baidumap://map/direction?origin=" + geoCoordinates + "&destination=" + Destination + "&mode=driving&src=webapp.navi.yourCompanyName.yourAppName";
                        }
                    }, function () {//
                        if (isAndroid == true) {
                            cordova.InAppBrowser.open("https://downapp.baidu.com/baidumap/AndroidPhone/10.24.8.1/1/1012337a/20200428220223/baidumap_AndroidPhone_10-24-8-1_1012337a.apk?responseContentDisposition=attachment%3Bfilename%3D%22baidumap_AndroidPhone_1012337a.apk%22&responseContentType=application%2Fvnd.android.package-archive&request_id=1588356464_2475875955&type=static", '_system', 'hardwareback=no')
                        }
                        else {
                            window.location.href = "itms-apps://itunes.apple.com/cn/app/%E7%99%BE%E5%BA%A6%E5%9C%B0%E5%9B%BE-%E6%99%BA%E8%83%BD%E5%AF%BC%E8%88%AA%E8%B7%AF%E7%BA%BF%E8%A7%84%E5%88%92%E6%97%85%E6%B8%B8%E5%87%BA%E8%A1%8C/id452186370?mt=8";
                        }
                    });
                }
                else if (names == "腾讯地图") {
                    let scheme;
                    if (isAndroid == true) {
                        scheme = 'com.tencent.map';
                    }
                    else {
                        scheme = 'sosomap://';
                    }
                    appAvailability.check(scheme, function () {//success callback
                        if (isAndroid == true) {
                            var sApp = startApp.set({
                                /* params */
                                "action": "ACTION_VIEW",
                                "category": "CATEGORY_DEFAULT",
                                "type": "text/css",
                                "package": "com.tencent.map",
                                "uri": "qqmap://map/routeplan?type=drive&to=" + Destination + "&tocoord=" + that.lat + "," + that.lng + "&coord_type=1&policy=0",
                                "flags": ["FLAG_ACTIVITY_CLEAR_TOP", "FLAG_ACTIVITY_CLEAR_TASK"],
                                "intentstart": "startActivity"
                            });
                            sApp.start(function () { /* success */
                                //alert("OK");
                            }, function (error) { /* fail */
                                this.$toast(error);
                            });
                        }
                        else {
                            window.location.href = "qqmap://map/routeplan?type=drive&fromcoord=CurrentLocation&to=" + Destination + "&tocoord=" + that.lat + "," + that.lng + ""
                        }
                    }, function () {//
                        if (isAndroid == true) {
                            cordova.InAppBrowser.open("https://qqmap-1251316161.file.myqcloud.com/mapCosApiUpload/apk/8.13.2.722/tencentmap_8.13.2.722_android_00002.apk", '_system', 'hardwareback=no')
                        } else {
                            window.location.href = "itms-apps://itunes.apple.com/cn/app/%E8%85%BE%E8%AE%AF%E5%9C%B0%E5%9B%BE-%E8%B7%AF%E5%86%B5%E7%B2%BE%E5%87%86%E5%87%BA%E8%A1%8C%E5%BF%85%E5%A4%87%E7%9A%84%E5%AF%BC%E8%88%AA%E8%BD%AF%E4%BB%B6/id481623196?mt=8"
                        }
                    })
                }
                else if (names == "苹果地图") {
                    window.location.href = "http://maps.apple.com/?daddr=" + Destination + "&dirflg=d&t=h"
                }
                else {
                    this.showPicker = false;
                }
            }

        },
    }
</script>

<style lang="scss" scoped>
    @import "../../assets/scss/core/base";

    /deep/ .btn-box{
        @include wh(100%,90px);
        margin-top: 70px;
    }
    /deep/ .btn-primary{
        width: 100%;
        background: #2C8DFF;
        color: #fff;
        font-size: 28px;
        height: 90px;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 99;
    }

    .con-map {
        height: 80%;
        width: 100%;
    }

    .con-box {
        .mapbox {
            margin-bottom: 10px;
            position: fixed;
            z-index: 111;
            width: 100%;
            height: 80%;
            padding: 10px 0;
            background: #eceeee;

            .map {
                width: 100%;
                height: 100%;
            }
        }

    }

    .loading {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 99999999;
    }
</style>